<template>
  <view class="router-view bcl-active trade">
    <view class="records-count box container">
      <view class="box-1 text-center">
        <view class="cl-second">支付费用￥{{ total.out_total || 0 }}</view>
        <view class="trade-progress bcl-second mt-10 outlay"></view>
      </view>
      <view class="box-1 text-center">
        <view class="cl-main">收入费用￥{{ total.in_total || 0 }}</view>
        <view class="trade-progress bcl-main mt-10 income"></view>
      </view>
    </view>

    <view class="trade-records mt-15">
      <tab :tab-title="['近一个月', '近3个月', '近一年']" @change="changeTab">
        <view slot="content">
          <view class="container">
            <trade-item
              v-for="(item, index) in list"
              :key="index"
              :item="item"
              :type="2"
            ></trade-item>

            <!-- 数据状态 -->
            <uni-load-more
              :status="loadMoreState"
              @retry="getTradeRecords(true)"
            ></uni-load-more>
          </view>
        </view>
      </tab>
    </view>
  </view>
</template>

<script>
import { walletTradeLog, bondLog } from "@/apis/user";
import tab from "@/components/tab";
import tradeItem from "./components/tradeItem";
import uniLoadMore from "@/components/loadMore";

export default {
  components: {
    tab,
    tradeItem,
    uniLoadMore,
  },

  data() {
    return {
      pageStr: {
        page: 1,
        total: 0,
      },
      loadMoreState: 0,
      type: 1, // 数据筛选类型 1 近一个月， 2 近三个月， 3近一年
      list: [],
      total: {}, // 收入和支出
      pageType: "balance",
    };
  },

  onLoad(options) {
    // 页面类型 options.type = balance 为钱包明细， bond 为保证金明细
    this.pageType = options.type;
    this.getTradeRecords();
  },

  methods: {
    /**
     * 获取列表
     */
    async getTradeRecords(refresh = false) {
      if (refresh) {
        this.pageStr.page = 1;
        this.list = [];
      }

      this.loadMoreState = 0;
      // 列表请求的方法，对应 pageType; balance 为 钱包明细， bond为保证金明细
      let listFn = {
        balance: walletTradeLog,
        bond: bondLog,
      };

      let params = {
        page: this.pageStr.page,
        type: this.type,
      };
      try {
        let { code, data, message } = await listFn[this.pageType](params);

        if (code === 200) {
          if (refresh) {
            this.pageStr.page = 1;
            this.list = [];
          }

          if (data && data.data) {
            console.log(data.data, "11");
            this.list = this.list.concat(data.data);
            this.pageStr.total = data.total;

            // 收入支出
            this.total = { in_total: data.in_total, out_total: data.out_total };

            if (data.total == 0) this.loadMoreState = 5;
            else if (this.list.length < data.total) this.loadMoreState = 4;
            else if (this.list.length == data.total) this.loadMoreState = 3;
          } else {
            this.loadMoreState = 5;
          }
        } else this.loadMoreState = 2;
      } catch (e) {
        this.loadMoreState = 2;
      }
    },

    /**
     * 切换时间筛选
     */
    changeTab({ index }) {
      this.type = index + 1;
      this.list = [];
      this.pageStr.page = 1;
      this.getTradeRecords();
    },
  },

  onReachBottom() {
    if (this.pageStr.total > this.list.length) {
      this.pageStr.page += 1;
      this.getTradeRecords();
    }
  },
};
</script>

<style lang="scss" scoped>
.trade {
  .records-count {
    .trade-progress {
      height: 14upx;
      border-radius: 20upx;

      &.outlay {
        margin-right: -3px;
        background: linear-gradient(-45deg, transparent 5px, $color-second 0);
      }

      &.income {
        margin-left: -3px;
        background: linear-gradient(135deg, transparent 5px, $color-main 0);
      }
    }
  }

  .uni-tab {
    .scroll-box {
      background-color: $color-active;

      .cate {
        width: 25%;
      }

      .container-cate {
        text-align: left;
      }
    }
  }
}
</style>
